import * as React from 'react';
import { observer } from 'mobx-react';
import { Row, Col, Button } from 'antd';

interface SearchBarProps {
    onClear?;
    onSearch?;
    [key:string]:any;
}

@observer
class SearchBar extends React.Component<SearchBarProps ,any>{
    onClear(me){
        return function(){
            me.props.onClear(me);
        }
    }
    onSearch(me){
        return function(){
            me.props.onSearch(me);
        }
    }
    render(){
        return (
            <div className = "searchForm" 
                 style= {{ 
                     padding: '20px 10px 15px 0px'
                 }}>
                 {this.props.children}
                 <Row>
                     <Col span={24} style={{ display: 'flex', justifyContent: 'flex-end' }}> 
                          <Button onClick = {this.onClear(this)}>清除</Button>
                          <Button type = "primary"
                                style = {{ marginLeft: 8, marginRight: 0 }}
                                onClick = {this.onSearch(this)}>查询</Button>
                     </Col>
                 </Row>
            </div>
        )
    }
}

@observer
export class SearchForm extends React.Component<{onClear: Function, onSearch: Function,store: any},any>{
    render(){
        return (
            <div>
                <div style={{
                    display: this.props.store.expand ? 'block' : 'none',
                    marginBottom: '10px',
                    marginLeft: '10px',
                    borderRadius: '5px',
                    background: '#fbfbfb',
                    border: '1px solid #d9d9d9'
                }}>
                    <SearchBar {...this.props}/>
                </div>
            </div>
        );
    }
}